<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>AA账单计算</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
	<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.all.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<style>
		td,.layui-table th{text-align: center;}
		.layui-col-xs2 .layui-input-inline{width: 119px;}
        .layui-col-xs2 input.layui-input{text-align: center;padding-left:0;}
        td{position: relative;}
        .remove{position: absolute;right: 10px;top: 0;bottom:0;margin:auto;border-radius: 22px;width: 22px;height: 22px;background: red;color: #ffffff;cursor: pointer;display: none;}
        .remove1{position: absolute;right: 15px;top: 10px;margin:auto;border-radius: 18px;width: 18px;line-height: 18px;height: 18px;color: #ffffff;cursor: pointer;display: none;}
        tr:hover .remove{display: block;}
        tr:hover .remove1{display: block;}

		.wwww{display: flex; justify-content:space-between;align-items: center;margin-top: 10px;}
		.wwww:first-child{margin-top: 0;}
		.addCase{vertical-align: top;}
		.addCase>span{display: inline-block;margin-top: 10px; background: #009688;color: #ffffff;border-radius: 4px;padding: 3px 5px;}
		.caseone{ display: flex; justify-content:space-between;padding: 0; }
		.caseone .one{display: flex; justify-content:space-between;}
		.caseone .one span{width: 70px; line-height: 38px;}
		.caseone .one input{width: 80px;}
		.yd{ display: flex; justify-content: space-between; align-items: center; }
		.total{padding-right: 10px;}
		.caseDel{margin-left: 15px;padding: 3px 5px;background: red;color: #ffffff;border-radius: 4px;}
		.jiajia{background: #009688;width: 20px;height: 20px;border-radius: 50%;line-height: 20px;text-align: center;color: #ffffff;}

        [v-clok]{display: none;}
	</style>
	<div class="layui-main" id="box">
		<div class="layui-row">
	        <table v-clok class="layui-table">
				<colgroup>
					<col width="150">
					<col width="100">
					<col width="420">
					<!-- <col width="150"> -->
					<col>
				</colgroup>
				<thead>
					<!-- <tr>
						<td colspan="100%">
							<div class="layui-row">
								<div class="layui-col-xs2">实际支付</div>
								<div class="layui-col-xs2">红包费</div>
								<div class="layui-col-xs2">满减费用</div>
								<div class="layui-col-xs2">运费</div>
								<div class="layui-col-xs2">人数</div>
								<div class="layui-col-xs2">总价</div></div>
						</td>
					</tr> -->
					<tr>
						<td colspan="100%">
							<div class="layui-row">
								<!-- <div class="layui-col-xs2">
									<div class="layui-input-inline">
										<input type="text" v-model="payPrice" class="layui-input">
									</div>
								</div>
								<div class="layui-col-xs2">
									<div class="layui-input-inline">
										<input type="text" v-model="envelopes" class="layui-input">
									</div>
								</div>
								<div class="layui-col-xs2">
									<div class="layui-input-inline">
										<input type="text" v-model="reduction" class="layui-input">
									</div>
								</div>
								<div class="layui-col-xs2">
									<div class="layui-input-inline">
										<input type="text" v-model="freight" class="layui-input">
									</div>
								</div>
								<div class="layui-col-xs2">
									<div class="layui-input-inline">
										<input type="text" v-model="people" class="layui-input layui-bg-gray" readonly="readonly">
									</div>
								</div>
								<div class="layui-col-xs2">
									<div class="layui-input-inline">
										<input type="text" v-model="allPrice" class="layui-input layui-bg-gray" readonly="readonly">
									</div>
								</div> -->
							</div>
						</td>
					</tr>
					<tr>
						<th>NAME</th>
						<th>操作</th>
						<th>支出</th>
						<!-- <th>包装费</th> -->
						<th>总计</th>
						<th>算法： </th>
						<!-- <th>需支付</th> -->
					</tr>
				</thead>
				<tbody>
					<tr v-for="(x,index) in list">
						<td>
							<div class="layui-input-inline">
								<input type="text" v-model="x.name" class="layui-input">
							</div>
							<!-- <div class="remove1" @click="delOne(index)" @contextmenu.prevent="addOne(index+1)">
								<svg t="1608606177047" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2443" width="18" height="18">
									<path d="M86.478452 0h841.88215c41.598624 0 75.533763 33.924129 75.533764 75.522753v863.782537c0 41.609634-33.93514 75.533763-75.533764 75.533764H86.478452c-41.598624 0-75.522753-33.924129-75.522753-75.533764V75.522753C10.955699 33.924129 44.879828 0 86.478452 0z m425.972989 668.044387a5.042925 5.042925 0 0 0-5.042925 5.031914v115.877161c0 2.78572 2.268215 5.042925 5.042925 5.042925H867.427097a5.042925 5.042925 0 0 0 5.031914-5.042925V673.076301a5.042925 5.042925 0 0 0-5.031914-5.031914H512.451441zM62.430968 48.590452a5.042925 5.042925 0 0 0-5.031914 5.042924v871.996559c0 48.513376-4.525419 47.500387 29.673978 12.607312l797.057377-813.199139c79.750882-81.358452 96.509247-76.447656-23.133592-76.447656H62.430968z" fill="#009688" p-id="2444"></path>
									<path d="M108.808258 227.570237h126.172215a5.053935 5.053935 0 0 0 5.042925-5.053936V96.344086c0-3.027957 2.257204-5.494366 5.031914-5.494366H360.932473c2.77471 0 5.031914 2.466409 5.031914 5.494366v126.172215c0 2.78572 2.257204 5.053935 5.042925 5.053936h126.172215c3.038968 0 5.505376 2.257204 5.505376 5.020903v115.877161c0 2.77471-2.466409 5.042925-5.505376 5.042925H371.007312a5.042925 5.042925 0 0 0-5.042925 5.031914v126.183226c0 3.027957-2.257204 5.505376-5.031914 5.505376H245.055312c-2.77471 0-5.031914-2.477419-5.031914-5.505376v-126.183226a5.053935 5.053935 0 0 0-5.042925-5.031914H108.808258c-3.027957 0-5.505376-2.257204-5.505376-5.042925V232.59114c0-2.77471 2.477419-5.020903 5.505376-5.020903z" fill="#009688" p-id="2445"></path>
								</svg>
							</div> -->
						</td>
						<td class="addCase"><span @click="addCaseOne(index,x.expenditure.length)">添加</span></td>
						<td>
							<div class="layui-input-inline yd">
								<div class="www">
									<div class="wwww" v-for="(item,index1) in x.expenditure">
										<div @click="addCaseOne(index,index1+1)" class="jiajia">+</div>
										<div class="caseone">
											<div class="one"><span>名称：</span><input type="text" v-model="item.name" class="layui-input"></div>
											<div class="one"><span>支出：</span><input type="text" v-model="item.money" class="layui-input"></div>
										</div>
										<div @click="delCaseOne(index,index1)" class="caseDel">删除</div>
									</div>
								</div>
								<!-- <div class="total">总计：{{x.total}}</div> -->
							</div>
						</td>
						<!-- <td>
							<div class="layui-input-inline">
								<input type="text" v-model="x.packing" class="layui-input">
							</div>
						</td> -->
						<td>{{x.total}}</td>
						<td>suanfa</td>
						<!-- <td></td> -->
					</tr>
					<tr>
						<td colspan="3" style="text-align: left;">
							<button class="layui-btn" @click="addOne(list.length)">+</button>
							<button class="layui-btn" @click="delOne(list.length-1)">-</button>
						</td>
						<td>{{totalPrice}}</td>
						<td colspan="2" :p="people"></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

	<script>
		layui.define(['jquery', 'layer'], function(exports){
			var $ = layui.$,
			layer = layui.layer;
		});
		var app3 = new Vue({
		    el: '#box',
		    data: function(){
		    	return {
					// payPrice:0,   //实际支付
					// envelopes:0,   //红包费
					// reduction:0,   //满减费用
					// freight:0,     //运费
					// // people:6,      //人数 改成计算属性了
					// totalPrice:0,  //总计
					list:[
						{
							name:'1',
							expenditure:[
								{name:'',money:0},
								// {name:'',money:0},
							],
							total:0
						},
						{
							name:'1',
							expenditure:[
								{name:'',money:0},
								// {name:'',money:3},
							],
							total:0
						},
						// {name:'2',expenditure:5,packing:0,toPrice:0,many:0},
						// {name:'3',expenditure:10,packing:0,toPrice:0,many:0},
						// {name:'4',expenditure:20,packing:0,toPrice:0,many:0},
						// {name:'5',expenditure:40,packing:0,toPrice:0,many:0},
					],
					totalPrice:0,  //总支出
				}
		    },
		    watch:{
			     // list:{//深度监听，可监听到对象、数组的变化
			     //     handler(val, oldVal){
			     //     	console.log(888);
			     //        console.log(val);
			     //        console.log(oldVal);
			     //     },
			     //     deep:true,  //true 深度监听
			     //     immediate : true //初始化页面后立即侦听
			     // }
			 },
            methods: {
            	addOne:function(k){
            		this.list.splice(k,0,{name:'1', expenditure:[{name:'-',money:0}, ], total:0 },);
            	},
                delOne:function(k){
                    this.list.splice(k,1);
                },
            	addCaseOne:function(k,l){
            		this.list[k].expenditure.splice(l,0,{name:'-',money:0});
            	},
            	delCaseOne:function(k,l){
                    this.list[k].expenditure.splice(l,1);
                }
			},
			computed: {
			    allPrice:function () { //总价
			      // return parseInt((parseFloat(this.envelopes)+parseFloat(this.reduction)+parseFloat(this.payPrice))*100)/100;
			    },
			    people:function(){
			    	this.list=this.list.map(item => {
			    		let total=0;
			    		for (i in item.expenditure) {
			    			if (item.expenditure[i].money) {
			    				total=total+parseFloat(item.expenditure[i].money)
			    			}
			    		}
			    		return {
				    		name:item.name,
							expenditure:item.expenditure,
							total:total,
				    	}
			    	});
			    	let allTotal=0;
			    	for (i in this.list) {
		    			if (this.list[i].total) {
		    				allTotal=allTotal+parseFloat(this.list[i].total)
		    			}
		    		}
		    		console.log(allTotal);
		    		this.totalPrice = allTotal;
		    		return this.list.length;
			    }
			}
		})
	</script>
</body>
</html>